<template>
    <div style="width: 100%;" v-loading.fullscreen.lock="fullscreenLoading">
        <p></p>
        <el-card class="box-card" v-loading="loading">
            <el-button class="button" v-for="result in subsetDepartments" :key="result" type="info" @click="chiliButtonOnDepartments(result.id,result.name)">{{result.name}}</el-button>
        </el-card>

        <el-button style="float: left; padding: 3px 0" type="text" @click="goToHomeDepartments">返回</el-button>
        <el-button style="padding: 3px 0" type="text" @click="getQRCode">查看/下载二维码</el-button>

        <el-dialog :title="'左键点击二维码 下载 '+addDepartmentName+' 二维码'" :visible.sync="dialogTableVisible">
            <a :href="QRCode " :download="addDepartmentName+'二维码'+new Date()+'.jpg'" ><img style="width: 100%;height: 100%" :src="QRCode"></img> </a>
        </el-dialog>
        <div style="text-align: center;">
            <p style="font-size: 20px">{{addDepartmentName}}</p>
        </div>
        <template>
            <ve-line :data="chartData"></ve-line>
        </template>

    </div>
</template>

<script>
    export default {
        name: "apatment",
        data(){
            return{
                fullscreenLoading:false,
                loading:false,
                subsetDepartments:[],
                addDepartment:'',
                addDepartmentName:'',
                dialogTableVisible:false,
                QRCode:'',
                chartData: {
                    columns: ['日期', '补贴账户', '现金账户',],
                    rows: [
                        { '日期': '1/1', '补贴账户': 1393, '现金账户': 10932 },
                        { '日期': '1/2', '补贴账户': 3530, '现金账户': 32305 },
                        { '日期': '1/3', '补贴账户': 2923, '现金账户': 26238 },
                        { '日期': '1/4', '补贴账户': 1723, '现金账户': 14237 },
                        { '日期': '1/5', '补贴账户': 3792, '现金账户': 34929 },
                        { '日期': '1/6', '补贴账户': 4593, '现金账户': 42937 }
                    ]
                }
            }
        },
        methods:{
            chiliButtonOnDepartments(id,departmentName){
                this.addDepartmentName=departmentName;
                this.addDepartment=id;
                this.getQueryingSubsetDepartments(id);
            },
            getQueryingSubsetDepartments(departmentId){
                this.loading=true;
                this.$api.queryingSubsetApartmentId(departmentId)
                    .then(res=>{
                        if (res.data.length<=0&&res.code===200){
                            this.$message.success('已加载完');
                            this.loading=false;
                        }
                        this.loading=false;
                        this.subsetDepartments=res.data
                    }).catch(err=>{
                    this.loading=false;
                    this.$message.error('网络错误')
                })
            },
            goToHomeDepartments(){
                this.chiliButtonOnDepartments(localStorage.getItem('departmentId'),localStorage.getItem('departmentName'));
            },
            getQRCode(){
                this.fullscreenLoading=true;
                this.dialogTableVisible=true;
                this.$api.getQRCode(this.addDepartment)
                .then(res=>{
                    this.QRCode=res;
                    this.fullscreenLoading=false;
                })
            }

        }
        ,
        mounted() {
            this.chiliButtonOnDepartments(localStorage.getItem('departmentId'),localStorage.getItem('departmentName'));
        }
    }
</script>

<style scoped>


    .box-card {
        width: 100%;
    }
    .box-card button{
        margin: 10px;
    }
</style>